<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/vdo.css">
    <link rel="stylesheet" href="css/nav.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/box.css">
    <link rel="stylesheet" href="css/footer.css">
    <script src="js/video.js" defer></script>
    <script src="js/dropdown-delay.js"></script>
    <title>美团PC端布局练习</title>
</head>

<body>
    <!-- 这是SVG sprite定义，直接复制自测试页，确保无编码和结构问题 -->
    <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position:absolute;">
        <symbol id="wk-deepArrow" viewBox="0 0 20 20">
            <path d="M5 7l5 5 5-5z" fill="#333" />
        </symbol>
        <symbol id="wk-arrow" viewBox="0 0 20 20">
            <path d="M7 5l6 5-6 5z" fill="currentColor"/>
        </symbol>
    </svg>
    <header>
        <div class="logo">
            <a href="https://www.meituan.com/"><img src="./images/meituan.webp" alt="">
            </a>
            <span class="font1">美团</span>
        </div>
        <nav class="navBar">
            <ul class="navBar-list">
                <li class="jH"><a class="" href="./pages/front-page.html">首页</a></li>
                <li class="jH"><a class="" href="./pages/win-together.html">和美团合作</a></li>
                <li class="jH jI"><a class="" href="index.html">我们的科技</a></li>
                <li class="jH deepArrow"><a class="jO " href="./pages/social.html">企业社会责任</a>
                    <div class="nav-dropdown-menu" style="color:#333;">
                        <svg width="20" height="20" class="jM">
                            <use href="#wk-deepArrow"></use>
                        </svg>
                    </div>
                    <div class="j1">
                        <div class="j2">
                            <div class="j21">
                                <h2>个体</h2>
                                <hr>
                                <a href="/csr/environmental-protection">遍历骑手生活</a><br>
                                <a href="/csr/environmental-protection">骑手关怀与发展</a><br>
                                <a href="/csr/environmental-protection">涌现新职业</a><br>
                            </div>
                            <div class="j22">
                                <h2>产业</h2>
                                <hr>
                                <a href="/csr/environmental-protection">助力市场繁荣</a><br>
                                <a href="/csr/environmental-protection">支持小商户发展</a><br>
                                <a href="/csr/environmental-protection">助力商家经营成长</a><br>
                                <a href="/csr/environmental-protection">中华老字号支持计划</a><br>
                            </div>
                            <div class="j23">
                                <h2>社会</h2>
                                <hr>
                                <a href="/csr/environmental-protection">推动绿色消费</a><br>
                                <a href="/csr/environmental-protection">支持乡村振兴</a><br>
                                <a href="/csr/environmental-protection">参与应急救灾</a><br>
                            </div>
                        </div>
                        <hr>
                        <div class="download-center">
                            <a href="/csr/environmental-protection">下载中心</a>
                        </div>
                    </div>
                </li>
                <li class="jH deepArrow"><a class="" href="./pages/Public-welfare.html">美团公益</a>
                    <div class="nav-dropdown-menu" style="color:#333;">
                        <svg width="20" height="20" class="jM">
                            <use href="#wk-deepArrow"></use>
                        </svg>
                    </div>
                    <div class="j1">
                        <div class="j3">
                            <a href="">美团乡村儿童操场</a><br>
                            <a href="">美团公益基金会</a><br>
                            <a href="">青山科技基金</a><br>
                        </div>
                    </div>
                </li>
                <li class="jH deepArrow"><a class="" href="./pages/Information-Disclosure.html">信息公开</a>
                    <div class="nav-dropdown-menu" style="color:#333;">
                        <svg width="20" height="20" class="jM">
                            <use href="#wk-deepArrow"></use>
                        </svg>
                    </div>
                    <div class="j1">
                        <div class="j4">
                            <a href="">骑手保障</a><br>
                            <a href="">商家生态</a><br>
                            <a href="">食品安全</a><br>
                            <a href="">算法公开</a><br>
                            <a href="">辟谣公告</a><br>
                        </div>
                    </div>
                </li>
                <li class="jH"><a class="" href="/investor-relations">投资者关系</a></li>
                <li class="jH"><a href="https://zhaopin.meituan.com/m/home?source=mtgw" target="_blank"
                        rel="noreferrer">加入我们</a></li>
            </ul>
        </nav>
        <div class="right">
            <div class="il deepArrow">下载和关注
                <div class="nav-dropdown-menu" style="color:#333;">
                    <svg width="20" height="20" class="jM">
                        <use href="#wk-deepArrow"></use>
                    </svg>
                </div>
                <div class="j1">
                    <div class="j5">
                        <a href="">美团APP</a><br>
                        <a href="">美团外卖APP</a><br>
                        <a href="">大众点评APP</a><br>
                        <a href="">美团微博</a><br>
                        <a href="">美团微信公众号</a><br>
                        <a href="">美团微信视频号</a><br>
                    </div>
                </div>
            </div>
            <div class="kl deepArrow">简体中文
                <div class="nav-dropdown-menu" style="color:#333;">
                    <svg width="20" height="20" class="jM">
                        <use href="#wk-deepArrow"></use>
                    </svg>
                </div>
                <div class="j1">
                    <div class="j6">
                        <a href="">简体中文</a><br>
                        <a href="">繁体中文</a>
                        <hr>
                        <a href="">English Version</a><br>
                    </div>
                </div>
            </div>
    </header>
    <main>
        <!-- Banner图 -->
        <div class="vdo">
            <span>用科技帮大家生活更好</span>
            <div class="vdo-btn" id="playBtn">
                <div class="a1"></div>
                <div class="a2">观看视频</div>
            </div>
        </div>
        <div class="vdo-box">
            <button class="close-btn">x</button>
            <video src="./images/科技.mp4" controls id="video1">
                您的浏览器不支持 video 标签
            </video>
        </div>
        <!-- 介绍内容 -->
        <div class="box1">
            <!-- <img src="./images/无人机.webp" alt=""> -->
            <div class="left">
                <div style="font-size: 40px;">无人机</div>
                <div style="font-size: 40px;">建设高效低空物流网络</div>
                <div class="bg-font">美团无人机已经初步完成了自主飞行无人机、全自动化收发餐机场以及无人机运行软件体系的研发工作，
                    达成安全、高效、经济、自主可控四大目标，合力打造多场景、多天候、高密度的城市低空物流网络。</div>
                <div style="font-size: 20px; margin-top: 20px;">
                    超过<span style="font-size: 56px; font-weight: 700; color: orange;">400</span>件
                    <p class="bg-font">美团无人机相关专利</p>
                </div>
                <div style="font-size: 20px; margin-top: 20px;"">
                    超过<span style=" font-size: 56px; font-weight: 700; color: orange;">30万</span>单
                    <p class="bg-font">配送完成订单</p>
                </div>
            </div>
            <div class="right">
                <img src="./images/无人机.webp" alt="">
            </div>
        </div>
        <div class="box2">
            <div class="left">
                <div style="font-size: 40px;">自动车</div>
                <div style="font-size: 40px;">丰富地面物流运力</div>
                <div class="bg-font">
                    我们基于自研自动配送车，重点突破城市复杂环境自动驾驶的多传感器融合感知、高精度定位、轨迹预测、决策规划、行为仿真等技术，打造车规级自动驾驶平台和大规模地面自动配送能力。</div>
                <div style="font-size: 20px; margin-top: 20px;">
                    <span style="font-size: 56px; font-weight: 700; color: orange;">360° | 5CM-150M</span>
                    <p class="bg-font">无死角大范围感知</p>
                </div>
                <div style="font-size: 20px; margin-top: 20px;"">
                    <span style=" font-size: 56px; font-weight: 700; color: orange;">99%</span>
                    <p class="bg-font">城市开放道路自动驾驶里程占比</p>
                </div>
            </div>
            <div class="right">
                <img src="./images/小车webp.webp" alt="">
            </div>
        </div>
        <div class="box3">
            <div style="font-size: 40px;" class="ml-5">空地楼 - 人机城，全域协同</div>
            <p class="bg-font ml-5">我们将努力连通低空、地面和楼宇，衔接工作人员、自动化设备和城市基础设施，实现全链路决策与协同，打造安全高效的即时物流网络。
                <br>
                我们基于智能决策、精确感知、安全执行三大模块，已经实现了业内领先的决策速度、求解质量、感知精度。
            </p>
            <div class="box3-1">
                <div class="left">
                    <video src="./images/b3-left.mp4" autoplay muted loop>
                        您的浏览器不支持 video 标签
                    </video>
                </div>
                <div class="right">
                    <video src="./images/b3-right.mp4" autoplay muted loop>
                        您的浏览器不支持 video 标签
                    </video>
                </div>
            </div>
        </div>
        <div class="box4">
            <div style="font-size: 40px;" class="ml-5">在零售场景中探索机器人技术与应用</div>
            <p class="bg-font ml-5">我们基于场景特点和机器人技术，以24小时药店、楼宇配送为试点，探索机器人落地应用，用实践指导技术迭代。让科技在实践中进化，让科技更好的服务人。
            </p>
            <div class="box4-1">
                <div class="left">
                    <video src="./images/b4-left.mp4" autoplay muted loop>
                        您的浏览器不支持 video 标签
                    </video>
                </div>
                <div class="right">
                    <video src="./images/b4-right.mp4" autoplay muted loop>
                        您的浏览器不支持 video 标签
                    </video>
                </div>
            </div>
        </div>

        <div class="box5">
            <div style="font-size: 40px;" class="ml-5">在零售场景中探索机器人技术与应用</div>
            <p class="bg-font ml-5">我们基于场景特点和机器人技术，以24小时药店、楼宇配送为试点，探索机器人落地应用，用实践指导技术迭代。让科技在实践中进化，让科技更好的服务人。
            </p>
            <div class="box5-img">
                <img src="./images/box5-image.webp" alt="">
            </div>
        </div>
        <div class="box6">
            <div style="display: flex; justify-content: space-between;">
                <div style="font-size: 40px;" class="ml-5">新闻资讯</div>
                <a href="/" style="display: inline-flex; align-items: center; height: 32px;border: 1px solid #222324;">
                    <span style="line-height: 32px; margin-left: 4px;">查看更多</span>
                    <svg style="width: 24px; height: 24px; line-height: 32px;">
                        <use xlink:href="#wk-arrow"></use>
                    </svg>
                </a>
            </div>

            <div class="box6-2">
                <a href="/">
                    <img src="./images/b6-left.webp" alt="">
                    <span style="display: inline-block; font-size:20px;">美团正式发布并开源 LongCat-Flash-Chat，动态计算开启高效 AI 时代</span>
                    <small style="display: inline-block;">2025-09-01</small>
                </a>
                <a href="/">
                    <img src="./images/b6-center.webp" alt="">
                    <span style="display: inline-block; font-size: 20px;">美团发布首款AI编程工具 集成自研模型让0基础用户可轻松开发软件</span>
                    <small style="display: inline-block;">2025-06-10</small>
                </a>
                <a href="/">
                    <img src="./images/b6-right.webp" alt="">
                    <span style="display: inline-block; font-size: 20px;">美团无人机香港首飞！翻山跨海的配送难题有了新解法</span><br>
                    <small style="display: inline-block;">2025-03-20</small>
                </a>
            </div>
        </div>
        <!-- ... 其他模块 ... -->
    </main>
    <!-- 页脚内容 -->
    <footer class="">
        <div class="hm">
            <div class="f1">
                <div class="logo">
                    <a href="https://www.meituan.com/"><img src="./images/meituan.webp" alt="">
                    </a>
                    <span class="font1">美团</span>
                </div>
            </div>
            <div class="f2">
                <div class="m1">
                    <div>
                        <h6 class="hu">了解更多</h6>
                        <div class="hp"></div>
                    </div>
                    <div class="hv">
                        <ul>
                            <li class="hw"><a class="hL" target="_blank" href="/news"><span>新闻中心</span></a></li>
                            <li class="hw"><a class="hL" target="_blank" href="/media"><span>媒体资源</span></a></li>
                            <li class="hw"><a href="https://isp.meituan.com/login" target="_blank" rel="noreferrer"
                                    class="hL"><span>供应商</span></a></li>
                        </ul>
                    </div>
                </div>

                <div class="m2">
                    <div>
                        <h6 class="hu">加入我们</h6>
                        <div class="hp"></div>
                    </div>
                    <div class="hv">
                        <ul>
                            <li class="hw"><a class="hL" target="_blank" href="/news"><span>新闻中心</span></a></li>
                            <li class="hw"><a class="hL" target="_blank" href="/media"><span>媒体资源</span></a></li>
                            <li class="hw"><a href="https://isp.meituan.com/login" target="_blank" rel="noreferrer"
                                    class="hL"><span>供应商</span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="m3">
                    <div>
                        <h6 class="hu">联系我们</h6>
                        <div class="hp"></div>
                    </div>
                    <div class="hv">
                        <ul>
                            <li class="hw"><a class="hL" target="_blank" href="/hotline"><span>服务热线</span></a></li>
                            <li class="hw"><a href="https://jubao.meituan.com/v2/home?source=3" target="_blank"
                                    rel="noreferrer" class="hL"><span>廉正举报</span></a></li>
                            <li class="hw"><a href="https://ipr.meituan.com/#/home" target="_blank" rel="noreferrer"
                                    class="hL"><span>知识产权</span></a></li>
                        </ul>
                    </div>
                </div>

                <div class="m4">
                    <h6 class="hu">下载和关注</h6>
                    <div class="hv">
                        <ul class="">
                            <li class="hw">
                                <div class="hidden"></div><span class="j7">美团App</span>
                            </li>
                            <li class="hw">
                                <div class="hidden"></div><span class="j7">美团外卖App</span>
                            </li>
                            <li class="hw">
                                <div class="hidden"></div><span class="j7">大众点评App</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="m5">
                    <h6 class="hu"></h6>
                    <div class="hv">
                        <ul class="">
                            <li class="hw">
                                <div class="hidden"></div><span class="j7">美团微博</span>
                            </li>
                            <li class="hw">
                                <div class="hidden"></div><span class="j7">美团微信公众号</span>
                            </li>
                            <li class="hw">
                                <div class="hidden"></div><span class="j7">美团微信视频号</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>



        <hr>
        <div class="bot">
            <div class="bot1">
                <div class="">
                    <p>举报电话：4006018900，举报邮箱：tousujubao@meituan.com,以上渠道均可投诉举报：互联网违法和不良信息，涉及未成年人保护、互联网算法推荐、谣言类信息、生活服务类专项举报等相关问题。
                    </p>
                </div>
                <div class="bot2">
                    <div class="">©2025 美团版权所有&nbsp;&nbsp;
                        <a href="https://beian.miit.gov.cn/">京ICP备10211739号</a>
                        <span>&nbsp;&nbsp;</span>
                        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002002052">
                            <span>京公网安备 11000002002052号</span>
                        </a>
                        <span>&nbsp;&nbsp; | </span>
                        <span>&nbsp;&nbsp;</span>
                        <span>
                            <a href="https://rules-center.meituan.com/rules-detail/2">隐私政策</a>
                            <span> | </span>
                            <a href="https://rules-center.meituan.com/">规则中心</a>
                        </span>
                    </div>
                </div>
                <div class="bot3"><span>药品医疗器械网络信息服务备案 (京)网药械信息备字（2022）第00228号 药品网络交易第三方平台备案
                        （京）网药平台备字〔2023〕第000013号 医疗器械网络交易第三方平台 （京）网械平台备字（2018）第00004号</span></div>
            </div>
        </div>
    </footer>

</body>


</html>